<template>
	<div class="component-item" :class="active?'selected':''" v-if="moduleData">
		<div class="flex center preview-item-top">
			<div class="del" @click.stop="delModule">
				<Icon type="ios-trash" size='22' style="color: white;" />
			</div>
		</div>
        <div class="component-content">
        	<div class="component-title">{{moduleData.label_name_cn}}</div>
			<div class="component-desc">{{moduleData.label_info_summary}}</div>
            <div style="min-height: 100px;">
				<div class="lottery-good" v-for="item in moduleData.data" :key="item.goods_id">
					<img :src="item.image_path" alt="">
					<div class="lottery-info">
						<div class="lottery-title">{{item.goods_title}}</div>
						<div class="lottery-price-wrapper flex between">
							<div class="disFlex Flex-bottom">
								<div class="lottery-price-tips">价值</div>
								<span class="lottery-price">¥ {{item.style[0].price_publicize}}</span>
							</div>
							<div v-if="item.lottery_status == 0" class="lottery-btn">免费抽奖</div>
							<div v-else class="lottery-btn lottered">已开奖</div>
						</div>
						<div class="lottery-bottom flex between">
							<div class="lottery-rule" v-if="item.lottery_type == 1">{{item.lottery_type_time}} 自动开奖</div>
							<div class="lottery-rule" v-else-if="item.lottery_type == 2">{{item.lottery_type_time}} 参与人满{{item.lottery_type_number}}人 自动开奖</div>
							<div class="lottery-rule" v-else-if="item.lottery_type == 3">手动开奖</div>
            				<div class="join-count">{{item.mall_lottery_join_count}}人已参加</div>
						</div>
					</div>
				</div>
			</div>
        </div>
    </div>
</template>

<script>

export default {
  	name: 'LotteryModule',		
	props: {
		/**
	     * @description 起始值，即动画开始前显示的数值
	     */
	    moduleData: {
	      type: Object,
	      default: null
	    },
	    active: {
	    	type: Boolean,
	    	default: false
	    }
	},
    data () {
        return {

    	}
    },
    methods: {
    	delModule() {
			this.$emit("delModule",this.moduleData);		
    	}
    },
    created() {
    },
    components: {
	}
 }
</script>

<style scoped>	
@import url("../baseModule.less");

.lottery-good {
	border-radius:6rpx;
	box-shadow:0px 0px 13px rgba(51,51,51,0.1);
	margin-bottom: 24px;
}
.lottery-good img {
	width: 100%;
	height: 200px;
}
.lottery-info {
	padding:10px 13px 15px;
}
.lottery-title {
	padding-top: 3px;
	font-size: 15px;
	line-height: 15px;
	font-weight:350;
	color:#333;
}
.lottery-price-wrapper {
	color: #F64031;
	font-size: 12px;
	margin-top: 8px;
}
.lottery-price-tips {
	font-size: 12px;
	transform: scale(0.8);
	margin-right: 5px;
}
.lottery-price {
	font-size: 15px;
	font-weight: 500;
}
.lottery-btn {
	width:64px;
	height:23px;
	line-height:23px;
	font-size:12px;
	transform: scale(0.9);
	color:#fff;
	background: #F64031;
	text-align: center;
	border-radius: 3px;
}
.lottery-btn.lottered {
	background: #c0c0c0;
	columns: #999;
}
.lottery-bottom {
	margin-top: 10px;
	color: #999;
	font-size: 12px;
}
.lottery-rule {
	font-size: 12px;
	transform: scale(0.9);
}
.join-count {
	font-size: 12px;
	transform: scale(0.8);
	width:64px;
	text-align: center;
}
</style>
